<template>
	<view>
		<view v-if="mode=='button'" :style="{display: 'grid',gridTemplateColumns: 'repeat('+repeat+')',gridColumnGap:gridColumnGap,gridRowGap:gridRowGap,padding:padding}">
			<view v-for="(state,idx) in list">
				<u-button :type="type"  @click="clickHandle(state.value)" :throttle-time="0"  :plain="isChecked(state.value)" >{{state.label}}</u-button>
			</view>
		</view>
		<view v-else>改模式还没有开发。。。</view>
	</view>
</template>

<script>
	export default {
		name:"ordersStateCheckBox",
		props:{
			mode:{
				type: String,
				default: 'button'
			},
			type:{
				type:String,
				default:"primary"
			},
			repeat:{
				type:String,
				default:'2,1fr'
			},
			gridColumnGap:{
				type:String,
				default:'30rpx'
			},
			gridRowGap:{
				type:String,
				default:'20rpx'
			},
			padding:{
				type:String,
				default:'20rpx'
			},
			list:{
				type:Array,
				default:[{label:'待出车',value:2},{label:'已出车',value:3},{label:'已还车',value:4},{label:'已取消',value:7}]
			},
			defaultchecked:{
				type:Array,
				default:()=>[]
			}
		},
		watch:{
			defaultchecked(e1,e2){
				this.checkedList=this.defaultchecked;
			}
		},
		data() {
			return {
				checkedList:[]
			};
		},
		mounted() {
			this.checkedList=this.defaultchecked;
		},
		methods:{
			isChecked(e){
				return !this.checkedList.includes(e);
				
			},
			clickHandle(e){
				var list=this.checkedList;
				if(list.includes(e)){
					var idx=list.indexOf(e);
					list.splice(idx,1);
				}else{
					list.push(e);
				}
				this.checkedList=list;
				this.$emit("change",list);
			}
		}
	}
</script>

<style>

</style>